import React, { Component } from 'react'
import { Button, Drawer } from 'antd'
import { BasicLayout, BasicLayoutSearch } from '../../../components/BasicLayout'
import { BasicPagination, TableCustomize, openModalMessage, compareDate } from '../../../components/TableCustomize'
import SearchForm from './SearchForm'
import AddForm from './AddForm'
export default class assembleCorrect extends Component {
    state = {
        paging: {},
        loading: false,
        advanced: false,
        dataSource: [
            {
                id: '1',
                name: 'John Brown',
                age: 32,
                address: 'New York No. 1 Lake Park',
            },
            {
                id: '2',
                name: 'Jim Green',
                age: 42,
                address: 'London No. 1 Lake Park',
            },
            {
                id: '3',
                name: 'Joe Black',
                age: 32,
                address: 'Sidney No. 1 Lake Park',
            },
            {
                id: '4',
                name: 'Disabled User',
                age: 99,
                address: 'Sidney No. 1 Lake Park',
            },
        ],
        columns: [
            {
                title: '序号',
                width: 50,
                render: (text, record, index) => <div>{index + 1}</div>,
            },
            {
                title: '报表类别',
                width: 100,
                dataIndex: 'age1',
            },
            {
                title: '车间',
                width: 100,
                dataIndex: 'age2',
            },
            {
                title: '机型',
                width: 100,
                dataIndex: 'age3',
            }, {
                title: '批号',
                width: 100,
                dataIndex: 'age4',
            }, {
                title: '装配机号',
                width: 100,
                dataIndex: 'age5',
            }, {
                title: '装配开始时间',
                width: 130,
                dataIndex: 'age6',
                sorter: (a, b) => compareDate(a.age6, b.age6)
            }, {
                title: '第一交机日期',
                width: 130,
                dataIndex: 'age7',
                sorter: (a, b) => compareDate(a.age7, b.age7)
            }, {
                title: '第一出机日期',
                width: 130,
                dataIndex: 'age8',
                sorter: (a, b) => compareDate(a.age8, b.age8)
            }, {
                title: '异常原因',
                width: 100,
                dataIndex: 'age9',
            }, {
                title: '审批结果',
                width: 100,
                dataIndex: 'age10',
            },
            {
                title: '操作',
                width: 100,
                dataIndex: 'open',
                render: (text, record, index) =>
                    <a onClick={this.inDetail.bind(this, record)}>详细</a>
            }
        ],
        some: null,
        selectedRows: [],
        selectedRowKeys: [],
        buttonLoading: false,
        formData: {},
        drawerVisible: false,
        one: false,

    }
    UNSAFE_componentWillMount() {
        this.fetch()
    }
    componentWillUnmount() {
        this.setState = () => {
            return;
        };
    }
    fetch = (pageNum = 1, pageSize = 100) => {
        const { values } = this.state
        this.setState({
            // loading: true,
            one: false,
            drawerVisible: false,
            formData: {},
            // 操作后清除选中
            selectedRowKeys: [],
            selectedRows: [],
            some: null,
            paging: { pageNum: pageNum, pageSize: pageSize }
        })
        let a = { pageNum: pageNum, pageSize: pageSize }
        this.search(values, a)
    }
    // 查询接口
    search = (value, paging) => {
        // APIService.queryQualityForm({...value, ...paging}).then((item) => {
        // 	// console.log('查询数据', item);
        // 	if (item.data.code === 200) {
        // 		// openSuccessModal('查询成功')
        // 		this.setState({
        // 			loading: false,
        // 			dataSource: item.data.data.data,
        // 			// 操作后清除选中
        // 			selectedRowKeys: [],
        // 			selectedRows: [],
        // 			some: null,
        // 			paging: {
        // 				pageNum: item.data.data.pageNum,
        // 				pageSize: item.data.data.pageSize,
        // 				total: item.data.data.total,
        // 			}
        // 		})
        // 	} else {
        // 		openModalMessage('error', item.data.msg)
        // 	}
        // })
    }
    // 新增接口/修改
    newData = (data) => {
        const { values, paging } = this.state
        // APIService.addQualityForm(data).then((item) => {
        // 	console.log(item);
        // 	if (item.data.code === 200) {
        // 		this.handleCancel()
        // 		openSuccessModal(item.data.msg)
        // 		this.search(values, paging )
        // 	} else {
        // 		this.setState({
        // 			buttonLoading: false
        // 		})
        // 		openModalMessage('error', item.data.msg)
        // 	}
        // })
    }
    // 新增
    newPlus = () => {
        this.setState({
            one: false,
            formData: {},
            drawerVisible: true
        })
    }
    // 打印
    print = () => {
        openModalMessage('warning', '功能待开发')
    }
    // 详细
    inDetail = (data) => {
        console.log(data);
    }
    // 条件查询查询
    handleSearch = value => {
        const { paging, values } = this.state
        let a = { pageNum: paging.pageNum, pageSize: paging.pageSize }
        this.setState({
            values: value
        })
        console.log({ ...values, ...a });
        this.search(value, a)
    };
    // 确定新增/修改
    onHandleOk = () => {
        this.formDrawer.validateFields((err, value) => {
            if (err) return;
            console.log('新增数据', value)
            this.setState({
                buttonLoading: true
            }, () => {
                this.newData(value)
            })
        })
    }
    // 取消
    handleCancel = e => {
        this.formDrawer && this.formDrawer.resetFields();
        this.setState({
            one: false,
            drawerVisible: false,
            formData: {},
            buttonLoading: false
        });
    };

    // 重置
    cz = () => {
        this.setState({
            values: null
        }, () => { this.fetch() })
    }
    // 高级查询
    advancedss = () => {
        this.setState({ advanced: !this.state.advanced })
    }
    render() {
        const { one, formData, buttonLoading, drawerVisible, selectedRowKeys, paging, columns, dataSource, loading, advanced } = this.state
        const rowSelection = {
            columnWidth: 60,
            type: 'checkbox',
            selectedRowKeys: selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                let some = [...selectedRows].length
                this.setState({
                    some: some,
                    selectedRows: selectedRows,
                    selectedRowKeys: selectedRowKeys
                }, () => {
                    console.log('选中个数', this.state.some, '选中详细数据', this.state.selectedRows);
                })
            },
        }
        return (
            <div>
                <BasicLayoutSearch>
                    <SearchForm onSearch={this.handleSearch}
                        onClick={this.cz}
                        onClick1={this.advancedss}
                        advanced={advanced}
                    />
                </BasicLayoutSearch>
                <BasicLayout
                    name="总装异常报告"
                    icon="table"
                    buttons={[
                        <Button key={1} onClick={this.newPlus} type='primary' icon='plus'>{'新增'}</Button>,
                        <Button key={2} onClick={this.print} type='primary' icon='printer'>{'打印'}</Button>,
                    ]}
                >
                    <TableCustomize
                        rowSelection={rowSelection}
                        columns={columns}
                        rowKey={(record) => record.id}
                        dataSource={dataSource}
                        pagination={false}
                        loading={loading}
                        allowDrafting={true}
                        scroll={{ x: true, y: 500 }}
                    />
                    <BasicPagination pageNum={paging.pageNum} pageSize={paging.pageSize} total={paging.total} loadData={this.fetch} />
                </BasicLayout>
                <Drawer
                    width={500}
                    visible={drawerVisible}
                    title={'新增'}
                    onClose={this.handleCancel}
                    destroyOnClose
                >
                    <AddForm
                        formData={formData}
                        one={one}
                        onOk={this.onHandleOk}
                        ref={node => (this.formDrawer = node)}
                        onClose={this.handleCancel}
                    />
                    <div
                        style={{
                            position: 'absolute',
                            right: 0,
                            bottom: 0,
                            width: '100%',
                            borderTop: '1px solid #e9e9e9',
                            padding: '10px 16px',
                            background: '#fff',
                            textAlign: 'right',
                        }}
                    >
                        <Button onClick={this.handleCancel} style={{ marginRight: 10 }}>{'取消'}</Button>
                        <Button type="primary" onClick={this.onHandleOk} loading={buttonLoading}>
                            {'确认'}
                        </Button>
                    </div>
                </Drawer>
            </div>
        )
    }
}

